.dataset-empty-content {
  height: calc(100vh - 220px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dataSet-container {
  .o-export-progress-notify {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 10;
    width: 400px;
    overflow: hidden;
    background-color: var(--o-bg-color-base);
    border-color: var(--o-bg-color-base);
    border-radius: 8px;
    box-shadow: var(--o-task-box-shadow);

    .o-export-notify__head {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 56px;
      padding: 4px 16px;
      font-size: var(--o-font-size-text);
      line-height: var(--o-line-height-text);
      color: var(--o-text-color-primary);
      background-color: var(--o-bg-color-light);

      .task-list {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
      }

      .nofity-show {
        display: flex;
        align-items: center;
        width: 20px;
        height: 100%;
      }
    }

    .o-export-notify__body {
      padding: 8px 16px;
      background-color: var(--o-bg-color-light);
    }

    .o-export-notify__list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      max-height: 500px;
      overflow-y: auto;

      .item {
        max-height: 112px;
        padding: 16px;
        padding-bottom: 12px;
        background: var(--o-bg-color-base);
        border-radius: 2px;

        .el-progress__text {
          min-width: 10px;
        }
      }

      .item-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 600;
        color: var(--o-text-color-primary);
      }

      .item-info {
        display: flex;
      }

      .item-close {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }

      .item-name {
        max-width: 240px;
        font-size: 12px;
        font-weight: 700;
        flex: 1;

        .item-name-text {
          font-size: 12px;
        }
      }

      .item-file-size {
        max-width: 60px;
      }

      .taskStatusPer {
        margin-top: 8px;
      }

      .waitExport,
      .packData {
        display: flex;
        gap: 4px;
        align-items: center;
        height: 32px;
        font-family: 'HarmonyOS Sans SC Regular', sans-serif !important;
        font-size: 12px;
        font-weight: 600;
        color: var(--o-text-color-primary);

        .el-icon {
          font-size: 14px;
        }
      }

      @keyframes rotate-img {
        from {
          transform: rotate(0);
        }

        to {
          transform: rotate(360deg);
        }
      }

      .icon-loading {
        height: 16px;
        width: 16px;
        background-repeat: no-repeat !important;
        background-size: 100% !important;
        display: inline-block;
        background: url('/src/assets/icons/taskLoading.png');
      }

      .icon-box {
        animation: rotate-img 0.8s infinite linear;
      }

      .errorIcon {
        width: 16px;
        height: 16px;

        path {
          color: rgb(228 33 33) !important;
        }
      }

      .successIcon {
        width: 14px;
        height: 14px;

        path {
          color: rgb(36 171 54) !important;
        }
      }

      .successTask {
        margin-left: 18px;
        font-size: 12px;
        color: rgb(99,149,253);
        cursor: pointer;
      }

      .opsExportTask {
        margin-bottom: 24px;
      }

      .errorRestart {
        font-size: 12px;
        color: rgb(99,149,253);
        cursor: pointer;
      }

      .errorReson {
        margin-left: 18px;
        font-size: 12px;
        color: rgb(141 152 170);
      }

      .errorTask {
        display: flex;
        gap: 4px;
      }

      .upload-success,
      .upload-error {
        display: flex;
        gap: 6px;
        align-items: center;
        margin-top: 6px;
        font-size: 12px;
        color: rgb(228 33 33);

        .el-icon {
          font-size: 14px;

          path {
            fill: rgb(228 33 33);
          }
        }
      }

      .upload-restart {
        color: rgb(99,149,253);
        cursor: pointer;
      }
    }

    .item-all-close {
      width: 100%;
      margin-top: 16px;
      margin-bottom: 8px;
      font-size: 12px;
      font-weight: 700;
      color: rgb(99,149,253);
      text-align: right;
      cursor: pointer;
    }

    .o-export-notify__close {
      position: absolute;
      right: 16px;
      font-size: var(--o-font-size-body);
      color: var(--o-text-color-secondary);
      cursor: pointer;

      &:hover {
        color: var(--o-text-color-primary);
      }
    }
  }
  .dataSet-container-header {
    display: flex;
    justify-content: space-between;

    .dataSet-container-left {
      display: flex;
      gap: 8px;
      .el-dropdown {
        .upBtn{
          border-color: #6395FD !important;
          color: #6395FD !important;
        }
      }
    }
    .dataSet-container-right {
      width: 356px;
      font-size: 12px;
    }
  }

  .custom-header {
    display: flex;
    gap: 4px;
    align-items: center;

    .searchIconIsActive {
      color: rgb(99, 149, 253) !important;
    }

    .el-icon {
      font-size: 16px;
      color: #8d98aa;
    }

    .el-icon:hover {
      color: rgb(99, 149, 253);
    }

    svg {
      width: 16px;
      height: 16px;
    }
  }
  .dataSet-name-row{
    color: rgb(99, 149, 253);
    cursor: pointer;
  }
  .statusFail,
  .statusSuccess,
  .statusWaitIng,
  .statusCancel {
    height: 16px;
    width: fit-content;
    padding: 0px 8px;
    font-size: 12px;
    line-height: 16px;
    color: rgb(255 255 255) !important;
    text-align: center;
    border-radius: 2px;
    font-weight: 500;
  }

  .statusFail {
    background: rgb(227, 32, 32);
  }

  .statusSuccess {
    background: rgb(36, 171, 54);
  }

  .statusCancel {
    background: rgb(141, 152, 170);
  }

  .statusWaitIng {
    background: rgb(250, 192, 84);

  }

  @keyframes rotate-img {
    from {
      transform: rotate(0);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .icon-loading {
    height: 16px;
    width: 16px;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    display: inline-block;
    background: url('/src/assets/icons/taskLoading.png');
  }

  .icon-box {
    animation: rotate-img 0.8s infinite linear;
  }

  .statusGenerate {
    display: flex;
    align-items: center;

    .percent-box {
      .el-progress-bar {
        width: 88px;
      }

      .el-progress__text {
        width: fit-content;
      }
    }

    .el-progress__text {
      width: 24px;
      min-width: 18px;
      color: var(--o-text-color-primary);
      margin-left: 8px;
    }

    .statusGenerateText {
      font-size: 12px;
      font-family: 'HarmonyOS Sans SC Medium';
      margin-left: 4px;
      color: var(--o-text-color-primary);
    }
  }
  .el-table__body-wrapper {
    flex: unset !important;
  }

  .el-table__header {
    height: 32px;
    width: 100% !important;
    box-shadow: inset 0 -1px 0 0 rgb(223 229 239);

    thead tr th {
      background-color: #f4f6fa;
    }
  }

  .el-table__body {
    width: 100% !important;
    color: black !important;

    .el-table__row {
      height: 48px;
    }
  }

  .el-table__cell {
    padding: 0 8px !important;
    font-size: 12px;
  }
  .el-table-column--selection{
    padding-left: 16px !important;
    padding-right: 0 !important;
  }
  .el-table-column--selection .cell {
    padding-right: 0 !important;
  }

  .el-pagination {
    margin-top: 24px !important;
  }

  .el-pagination .el-input__inner {
    height: var(--el-input-inner-height) !important;
  }

  .el-switch,
  .el-switch__core {
    width: 32px !important;
    min-width: unset !important;
    height: 16px !important;
  }

  .el-switch__action {
    top: 1.3px;
    left: 1.5px;
    width: 12px !important;
    height: 12px !important;
  }

  .el-switch.is-checked .el-switch__core .el-switch__action {
    left: calc(100% - 13px) !important;
  }

  .dataSet-container-table-box {
    margin-top: 16px;
    height: calc(100vh - 256px);
    display: flex;
    flex-direction: column;
    .dataSetTableContainer{
      height: calc(100vh - 320px);
    }
    .el-table .cell{
      line-height: 16px !important;
    }
    tbody {
      td {
        border-right: unset !important;
      }
    }

    .el-table.is-scrolling-left.el-table--border .el-table-fixed-column--left.is-last-column.el-table__cell {
      border-right: unset !important;
    }

    .el-table {
      ::-webkit-scrollbar {
        width: 4px !important;
      }

      .el-scrollbar__bar.is-vertical {
        width: 4px !important;
      }
    }
  }

  
}
.el-dropdown-menu {
  padding: 4px 0 !important;
  .el-dropdown-menu__item {
    font-size: 12px !important;
  }
}